<template>
  <div>
    <span v-for="(option, index) in event.column.filters" :key="index">
      <el-input
          v-model="option.data"
          style="width: 100%;"
          placeholder="关键字搜索"
          clearable
          @input="changeNameFilter(option)"
          @change="changeNameFilter(option)"
      ></el-input>
    </span>
  </div>
</template>

<script>
export default {
  name: 'olTableFilter',
  data() {
    return {
      event: this.$attrs.event
    };
  },
  methods: {
    changeNameFilter(option) {
      option.checked = true;
      this.event.$grid.updateData();
    },
    filterMethod({ option, row, column }) {
      if (option.data && row[column.field]) {
        return row[column.field].indexOf(option.data) !== -1;
      }
      return true;
    }
  },
  created() {
    this.event.column.filters = [{ data: '' }];
    this.event.column.filterMethod = this.filterMethod;
  }
};
</script>
